<template>
	<view class="content">

		<view v-if="id == 227"
			:style="{ width: chunwan.width, height: chunwan.height, background: get_back(), backgroundSize: '100% 100%' }">
			<view class="top_img">
				<image :src="topImg[1].imgTop"></image>
			</view>
		</view>
		
		<view v-else>
			<view v-for="(item, idx) in topImg">
				<view class="top_img" v-if="id == item.id">
					<image :src="item.imgTop"></image>
				</view>
			</view>
		</view>

		<view :class="id == 227 ? 'chunwan' : 'niancai'" v-if="videoUrl">
			<view class="shipin">
				<video :src="videoUrl"></video>
			</view>
			<view class="title">{{title}}</view>
		</view>

		<view class="zwsj" v-else>
			<image src="@/static/activity/healthHome/jqqd.png" alt="" />
			</image>
			<view>敬请期待</view>
		</view>

	</view>
</template>

<script>
	import config from "@/config";
	export default {
		data() {
			return {
				id: null,
				title: null,
				videoUrl: null,
				firstOrder: null,
				topImg: [{
						id: 226,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/niancaiTop.png"
					},
					{
						id: 227,
						imgTop: config.ossUrl + "/new_app/activity/newYear/NY2025/chunwanTop.png"
					},
				],
				chunwan: {
					width: '100vw',
					height: '580rpx',
				},
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.title = opt.title
			this.videoUrl = opt.videoUrl
		},
		methods: {
			get_back() {
				return 'url(' + config.ossUrl + '/new_app/activity/newYear/NY2025/chunwanBj.png)';
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, #B70916, #B70916, #FB4651);
	}

	.topTu {
		width: 100vw;
		height: 420rpx;
	}

	.topTu>image {
		width: 100%;
		height: 100%;
	}

	.wenzi {
		width: 90%;
		margin: 0 auto;
	}

	.note {
		width: 92%;
		position: absolute;
		top: 305rpx;
		color: white;
		font-size: 15rpx;
		letter-spacing: 2rpx;
		text-indent: 3em;
		line-height: 20rpx;
	}

	.top_img {
		width: 100vw;
		height: 400rpx;
	}

	.top_img>image {
		width: 100%;
		height: 100%;
	}

	.chunwan {
		position: relative;
		z-index: 99;
		width: 85%;
		margin: 0 auto;
		margin-top: -60rpx;
		border-radius: 20rpx;
		padding: 35rpx;
		background: url('../../../../static/activity/newYear/bj.png') 100% 100% / 100% 100%;
	}
	
	.niancai {
		position: relative;
		z-index: 99;
		width: 85%;
		margin: 0 auto;
		margin-top: 120rpx;
		border-radius: 20rpx;
		padding: 35rpx;
		background: url('../../../../static/activity/newYear/bj.png') 100% 100% / 100% 100%;
	}

	.shipin {
		width: 100%;
		height: 450rpx;
	}

	.shipin>video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.title {
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		margin-top: 35rpx;
	}

	.description {
		color: white;
		margin-top: 15rpx;
		text-indent: 2em;
	}

	.zwsj {
		width: 60%;
		margin: 0 auto;
		margin-top: 250rpx;
	}

	.zwsj>image {
		width: 100%;
		height: 420rpx;
	}

	.zwsj>view {
		font-size: 35rpx;
		text-align: center;
		margin-top: 30rpx;
		color: gray;
	}
</style>